import React from 'react';
import Client from '../Client';
import {
  DropdownButton,
  Dropdown,
} from 'react-bootstrap';
export default function UsrDrop(props){
  let state,setState;
  [state,setState]=React.useState({
    users: [],
    selected:""
  });
  React.useEffect(() => {
    // console.log("one time")
    componentDidMount();
  }, []);
  const componentDidMount = () => {
    Client.cache_users((res)=>{
          // console.log(res);
          setState({users:res,selected:state.selected});
        });
  };
  const onSelect=(user_name)=>{
    setState({selected:user_name,users:state.users}); 
    props.onSelect(user_name);
  }
    const userMenu = state.users.map((user, idx) => (
      <Dropdown.Item  key={idx}
        onSelect={()=>{onSelect(user.username);}}
      >
        {user.username}
      </Dropdown.Item>
    ));
    return (
      <DropdownButton
        variant="light"
        title={props.title?props.title+":"+state.selected:""}
      >
        <Dropdown.Item onSelect={()=>{onSelect("");}}>
          *
        </Dropdown.Item>
        {
          userMenu
        }
      </DropdownButton>
    );
};

